<?php
$this->breadcrumbs = array(
    'Dashboard - Statistic'
);
?>
<div class="row-fluid">
    <div class="box">
        <header>
            <h5>Line Chart</h5>
        </header>
        <div class="body">
            <div class="row-fluid">
                <div class="span6" id="chart_customer" style="min-height: 300px; min-width: 400px"></div>
                <div class="span6" id="chart_technician" style="min-height: 300px; min-width: 400px"></div>
            </div>
            <div class="row-fluid">
                <div class="span6" id="chart_order" style="min-height: 300px;"></div>
                <div class="span6" id="chart_earnings" style="min-height: 300px;"></div>
            </div>
            <div id="chart_order_status" style="min-height: 500px; width: 100%"></div>
        </div>
    </div>
</div>
<script>


    /*--------------------------------------------------------
     BEGIN DASHBOARD SCRIPTS
     ---------------------------------------------------------*/
    function dashboard() {

        /*----------- BEGIN SPARKLINE CODE -------------------------*/
        /* required jquery.sparkline.min.js*/

        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.inlinesparkline').sparkline();

        /* Sparklines can also take their values from the first argument
         passed to the sparkline() function */
        var myvalues = [10, 8, 5, 7, 4, 4, 1];
        $('.dynamicsparkline').sparkline(myvalues);

        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'});

        /* Use 'html' instead of an array of values to pass options
         to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'});


        $(".sparkline.bar_week").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
            type: 'bar',
            height: '40',
            barWidth: 5,
            barColor: '#4d6189',
            negBarColor: '#a20051'
        });

        $(".sparkline.line_day").sparkline([5, 6, 7, 9, 9, 5, 4, 6, 6, 4, 6, 7], {
            type: 'line',
            height: '40',
            drawNormalOnTop: false
        });

        $(".sparkline.pie_week").sparkline([1, 1, 2], {
            type: 'pie',
            width: '40',
            height: '40'
        });

        $('.sparkline.stacked_month').sparkline(['0:2', '2:4', '4:2', '4:1'], {
            type: 'bar',
            height: '40',
            barWidth: 10,
            barColor: '#4d6189',
            negBarColor: '#a20051'
        });
        /*----------- END SPARKLINE CODE -------------------------*/

    }
    /*--------------------------------------------------------
     END DASHBOARD SCRIPTS
     ---------------------------------------------------------*/

    dashboard();

    google.load("visualization", "1", {packages: ["columnchart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
<?php
/**
 * Top customer
 */
?>
//create data table object
        var data_customer = new google.visualization.DataTable();
//define columns
        data_customer.addColumn('string', 'Total');
        data_customer.addColumn('number', 'Orders');

//define rows of data
        data_customer.addRows([
        <?php
            foreach ($top_customer as $k => $v):
                echo '[\'' . $v['user_nicename'] . '\',' . $v['total'] . '],';
            endforeach;
        ?>
        ]);

        var options_customer = {
            is3D: true,
            title: 'Top Customer', titleTextStyle: {color: 'red'}
        };

        var chart_customer = new google.visualization.PieChart(document.getElementById('chart_customer'));
        chart_customer.draw(data_customer, options_customer);
<?php
/**
 * Top Technician
 */
?>
        /*--------- Top Technician ----------*/
//create data table object
        var data_technician = new google.visualization.DataTable();
//define columns
        data_technician.addColumn('string', 'Total');
        data_technician.addColumn('number', 'Orders');

//define rows of data
        data_technician.addRows([
        <?php
            foreach ($top_technician as $k => $v):
                echo '[\'' . $v['admin_nicename'] . '\',' . $v['total'] . '],';
            endforeach;
        ?>
        ]);

        var options_technician = {
            is3D: true,
            title: 'Top Technician', titleTextStyle: {color: 'red'}
        };

        var chart_technician = new google.visualization.PieChart(document.getElementById('chart_technician'));
        chart_technician.draw(data_technician, options_technician);


<?php
/**
 * Total order statistic
 */
?>
//create data table object
        var data_order = new google.visualization.DataTable();
//define columns
        data_order.addColumn('string', 'Total');
        data_order.addColumn('number', 'Orders');

//define rows of data
        data_order.addRows([
            ['Month', <?php echo $statistic['order']['month']; ?>],
            ['Week', <?php echo $statistic['order']['week']; ?>],
            ['Today', <?php echo $statistic['order']['today']; ?>]
        ]);

        var options_order = {
            is3D: true,
            title: 'Statistic Company Orders', titleTextStyle: {color: 'red'}
        };

        var chart_order = new google.visualization.ColumnChart(document.getElementById('chart_order'));
        chart_order.draw(data_order, options_order);

<?php
/**
 * Total price statistic
 */
?>
//create data table object
        var data_earnings = new google.visualization.DataTable();
//define columns
        data_earnings.addColumn('string', 'Total');
        data_earnings.addColumn('number', 'Earnings');

//define rows of data
        data_earnings.addRows([
            <?php
            foreach ($order_earnings as $k => $v):
                echo '[\'' . $v['package_name'] . '\',' . $v['total'] . '],';
            endforeach;
            ?>
        ]);

        var options_earnings = {
            is3D: true,
            title: 'Company Earnings', titleTextStyle: {color: 'red'}
        };

        var chart_earnings = new google.visualization.ColumnChart(document.getElementById('chart_earnings'));
        chart_earnings.draw(data_earnings, options_earnings);

<?php
/**
 * Total order statistic of awaiting, process, approval, delevered
 */
?>
        //create data table object
        var data_order_status = new google.visualization.DataTable();
//define columns
        data_order_status.addColumn('string', 'Total');
        data_order_status.addColumn('number', 'Delivered');
        data_order_status.addColumn('number', 'Awaiting Approval');
        data_order_status.addColumn('number', 'In Process');
        data_order_status.addColumn('number', 'Awaiting Assignments');

//define rows of data
        data_order_status.addRows([
            ['Month', <?php echo $statistic['completed']['month'] . ',' . $statistic['approval']['month'] . ',' . $statistic['process']['month'] . ',' . $statistic['awaiting']['month']; ?>],
            ['Week', <?php echo $statistic['completed']['week'] . ',' . $statistic['approval']['week'] . ',' . $statistic['process']['week'] . ',' . $statistic['awaiting']['week']; ?>],
            ['Today', <?php echo $statistic['completed']['today'] . ',' . $statistic['approval']['today'] . ',' . $statistic['process']['today'] . ',' . $statistic['awaiting']['today']; ?>]
        ]);

        var options_order_status = {
            is3D: true,
            title: 'Statistic Company Orders', titleTextStyle: {color: 'red'}
        };

        var chart_order_status = new google.visualization.ColumnChart(document.getElementById('chart_order_status'));
        chart_order_status.draw(data_order_status, options_order_status);


    }

</script>